<template>
  <view>
    <view class="header">
      <view class="search-box">
        <view class="search yd-flex-h-hC-vC">
          <image class="search__icon" src="~@/static/searchIcon.png"/>
          <input class="yd-flex-1" placeholder="搜索商品" />
          <text class="search__text">搜索</text>
        </view>
      </view>
      <view class="tabs-box" >
        <van-tabs :active="active" color="#FBBF0D" title-active-color="#FBBF0D">
          <van-tab title="全部" name="0" />
          <van-tab title="社区热点" />
          <van-tab title="商业动态" />
          <van-tab title="政策补贴" />
          <van-tab title="社区规划" />
          <van-tab title="群众建议" />
          <van-tab title="国家政策" />
          <van-tab title="人民需求" />
        </van-tabs>
      </view>
    </view>
    <view class="news-box">
      <view @tap="detail(item)" v-for="(item, index) in newsData" :key="index" class="news">
        <view class="yd-flex-1">
          <view class="news__title yd-clamp-2">{{ item.title }}</view>
          <view>{{ item.name }}<text style="margin-left: 12rpx">{{ item.date }}</text></view>
        </view>
        <image class="news__img" :src="item.img"/>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      newsData: [
        {
          title: 'CBD|W酒店紫艷中餐厅丨新派粤菜',
          name: '小小管理',
          date: '2023/02/28',
          img: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca07bc44b6054a4fbb9ec0ca0c75c0ef~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?'
        },
        {
          title: '惠民广场灯光璀璨，新灯惠民广场灯光璀璨，新灯饰装修，各式花灯结彩喜…惠民广场灯光璀璨，新灯饰装修，各式花灯结彩喜惠民广场灯光璀璨，新灯饰装修，各式花灯结彩喜…惠民广场灯光璀璨，新灯饰装修，各式花灯结彩喜饰装修，各式花灯结彩喜…惠民广场灯光璀璨，新灯饰装修，各式花灯结彩喜',
          name: '小小管理',
          date: '2023/02/28',
          img: 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f92f5b6e10e41a5a66fe7b6a007401a~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?'
        },
        {
          title: '免预约|节假日通用·牛扒先生·22店适用',
          name: '小小管理',
          date: '2023/02/28',
          img: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea805c553e65432fb3cb4b86ef82e07a~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?'
        },
      ]
    }
  },
  methods: {
    detail(item) {
      uni.navigateTo({
        url: '/subpages/community/detail/detail'
      })
    }
  }
}
</script>

<style>
.header {
  width: 100%;
  background-color: #fff;
  border-radius: 0 0 14rpx 14rpx;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}
.search-box {
  box-sizing: border-box;
  padding: 0 24rpx;
}
.search {
  width: 100%;
  height: 88rpx;
  background-color: #F5F5F5;
  border-radius: 14rpx;
  margin-top: 24rpx;
  color: #333333;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 0 28rpx 0 24rpx;
}
.search__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.search__text {
  color: #FBBF0D;
  margin-left: 24rpx;
  font-weight: bold;
}
.tabs-box {
  margin-top: 12rpx;
}
.news-box {
  box-sizing: border-box;
  padding: 24rpx 24rpx 1px 24rpx ;
}
.news {
  width: 100%;
  min-height: 176rpx;
  background-color: #fff;
  border-radius: 22rpx;
  box-sizing: border-box;
  padding: 24rpx;
  font-size: 24rpx;
  color: #AAAAAA;
  display: flex;
  line-height: 38rpx;
  margin-bottom: 24rpx;
}
.news__title {
  font-size: 28rpx;
  color: #222222;
  margin-bottom: 16rpx;
  font-weight: bold;
}
.news__img {
  min-width: 180rpx;
  width: 180rpx;
  height: 128rpx;
  border-radius: 10rpx;
  margin-left: 28rpx;
}
</style>
